<template>
  <div class="mainContent">
    <div v-if="ifFee">
      <a-spin :spinning="spinning">
        <div style="width: 90%; margin: 0 auto">
          <a-row>
            <a-col :xs="{ span: 24 }" :sm="{ span: 4 }" class="formGroupTitle"
              >基本信息</a-col
            >
          </a-row>
          <a-form style="margin-bottom: 20px" layout="inline">
            <!-- <a-form-item class="formItemWidth" v-bind="formItemLayout" label="Email">
              <span v-if="show" class="ant-form-text">{{queryDetail.email}}</span>
              <span v-if="!show" class="ant-form-text">
                <a-hide-data :params="{type:'email',value:queryDetail.email}"></a-hide-data>
              </span>
            </a-form-item> -->
            <a-form-item
              class="formItemWidth"
              v-bind="formItemLayout"
              label="会员编号"
            >
              <span class="ant-form-text">{{ agent.memberNo }}</span>
            </a-form-item>
            <a-form-item
              class="formItemWidth"
              v-bind="formItemLayout"
              label="合作机构号"
            >
              <span class="ant-form-text">{{ agent.agentCode }}</span>
            </a-form-item>
            <a-form-item
              class="formItemWidth"
              v-bind="formItemLayout"
              label="手机号"
            >
              <span v-if="show" class="ant-form-text">{{
                queryDetail.mobile
              }}</span>
              <span v-if="!show" class="ant-form-text">
                <a-hide-data
                  :params="{ type: 'mobileNo', value: queryDetail.mobile }"
                ></a-hide-data>
              </span>
            </a-form-item>
            <a-form-item
              class="formItemWidth"
              v-bind="formItemLayout"
              label="客户类型"
            >
              <span class="ant-form-text" v-if="agent.merchantType == 'small'"
                >小微商户</span
              >
              <span class="ant-form-text" v-if="agent.merchantType == 'org'"
                >企业</span
              >
              <span class="ant-form-text" v-if="agent.merchantType == 'mer'"
                >个体户</span
              >
            </a-form-item>
            <a-form-item
              class="formItemWidth"
              v-bind="formItemLayout"
              label="客户名称"
            >
              <span class="ant-form-text">{{ agent.merchantName }}</span>
            </a-form-item>
            <a-form-item
              class="formItemWidth"
              v-bind="formItemLayout"
              label="客户简称"
            >
              <span class="ant-form-text">{{ agent.shortName }}</span>
            </a-form-item>
            <a-form-item
              class="formItemWidth"
              v-bind="formItemLayout"
              v-if="this.agent.merchantType != 'small'"
              label="营业期限"
            >
              <span class="ant-form-text"
                >{{ agent.orgExpiryDateStart }}-{{
                  agent.orgExpiryDateEnd
                }}</span
              >
            </a-form-item>
            <a-form-item
              class="formItemWidth"
              v-bind="formItemLayout"
              label="营业地址"
            >
              <span v-if="show" class="ant-form-text"
                >{{ agent.realProvinceName }}-{{ agent.realCityName }}-{{
                  agent.realDistrictName
                }}-{{ agent.realAddress }}</span
              >
              <span v-if="!show" class="ant-form-text">{{
                agent | otherfilter
              }}</span>
            </a-form-item>
            <a-form-item
              style="width: 50%"
              :label-col="{ span: 12 }"
              :wrapper-col="{ span: 11, offset: 1 }"
              label="社会统一信用代码/注册号"
              v-if="this.agent.merchantType != 'small'"
            >
              <span v-if="show" class="ant-form-text">{{
                agent.orgRegisterNo
              }}</span>
              <span v-if="!show" class="ant-form-text">{{
                agent.orgRegisterNo | creditNoFilter
              }}</span>
            </a-form-item>
            <div v-if="this.agent.merchantType != 'small'">
              <a-row>
                <a-col
                  :xs="{ span: 24 }"
                  :sm="{ span: 4 }"
                  class="formGroupTitle"
                  >法定代表人信息</a-col
                >
              </a-row>
              <a-form-item
                class="formItemWidth"
                v-bind="formItemLayout"
                label="姓名"
              >
                <span v-if="show" class="ant-form-text">{{
                  legalIdentity.identityName
                }}</span>
                <span v-if="!show" class="ant-form-text">
                  <a-hide-data
                    :params="{
                      type: 'idName',
                      value: legalIdentity.identityName,
                    }"
                  ></a-hide-data>
                </span>
              </a-form-item>
              <a-form-item
                class="formItemWidth"
                v-bind="formItemLayout"
                label="证件类型"
              >
                <span class="ant-form-text">身份证</span>
              </a-form-item>
              <a-form-item
                class="formItemWidth"
                v-bind="formItemLayout"
                label="证件号码"
              >
                <span v-if="show" class="ant-form-text">{{
                  legalIdentity.identityNo
                }}</span>
                <span v-if="!show" class="ant-form-text">
                  <a-hide-data
                    :params="{
                      type: 'idCard',
                      value: legalIdentity.identityNo,
                    }"
                  ></a-hide-data>
                </span>
              </a-form-item>
              <a-form-item
                class="formItemWidth"
                v-bind="formItemLayout"
                label="证件有效期"
              >
                <span class="ant-form-text">{{
                  legalIdentity.expiryDate
                }}</span>
              </a-form-item>
            </div>
            <div v-if="this.agent.merchantType == 'small'">
              <a-row>
                <a-col
                  :xs="{ span: 24 }"
                  :sm="{ span: 4 }"
                  class="formGroupTitle"
                  >申请人信息</a-col
                >
              </a-row>
              <a-form-item
                class="formItemWidth"
                v-bind="formItemLayout"
                label="姓名"
              >
                <span v-if="show" class="ant-form-text">{{
                  smallIdentity.identityName
                }}</span>
                <span v-if="!show" class="ant-form-text">
                  <a-hide-data
                    :params="{
                      type: 'idName',
                      value: smallIdentity.identityName,
                    }"
                  ></a-hide-data>
                </span>
              </a-form-item>
              <a-form-item
                class="formItemWidth"
                v-bind="formItemLayout"
                label="证件类型"
              >
                <span class="ant-form-text">身份证</span>
              </a-form-item>
              <a-form-item
                class="formItemWidth"
                v-bind="formItemLayout"
                label="证件号码"
              >
                <span v-if="show" class="ant-form-text">{{
                  smallIdentity.identityNo
                }}</span>
                <span v-if="!show" class="ant-form-text">
                  <a-hide-data
                    :params="{
                      type: 'idCard',
                      value: smallIdentity.identityNo,
                    }"
                  ></a-hide-data>
                </span>
              </a-form-item>
              <a-form-item
                class="formItemWidth"
                v-bind="formItemLayout"
                label="证件有效期"
              >
                <span class="ant-form-text">{{
                  smallIdentity.expiryDate
                }}</span>
              </a-form-item>
            </div>

            <div v-if="this.agent.merchantType != 'small'">
              <a-row>
                <a-col
                  :xs="{ span: 24 }"
                  :sm="{ span: 4 }"
                  class="formGroupTitle"
                  >联系人信息</a-col
                >
              </a-row>
              <a-form-item
                class="formItemWidth"
                v-bind="formItemLayout"
                label="姓名"
              >
                <span v-if="show" class="ant-form-text">{{
                  agent.contactName
                }}</span>
                <span v-if="!show" class="ant-form-text">
                  <a-hide-data
                    :params="{ type: 'idName', value: agent.contactName }"
                  ></a-hide-data>
                </span>
              </a-form-item>
              <a-form-item
                class="formItemWidth"
                v-bind="formItemLayout"
                label="联系电话"
              >
                <span v-if="show" class="ant-form-text">{{
                  agent.contactPhone
                }}</span>
                <span v-if="!show" class="ant-form-text">
                  <a-hide-data
                    :params="{ type: 'mobileNo', value: agent.contactPhone }"
                  ></a-hide-data>
                </span>
              </a-form-item>
              <a-form-item
                class="formItemWidth"
                v-bind="formItemLayout"
                label="Email"
              >
                <span v-if="show" class="ant-form-text">{{
                  agent.contactEmail
                }}</span>
                <span v-if="!show" class="ant-form-text">
                  <a-hide-data
                    :params="{ type: 'email', value: agent.contactEmail }"
                  ></a-hide-data>
                </span>
              </a-form-item>
            </div>

            <a-row>
              <a-col :xs="{ span: 24 }" :sm="{ span: 4 }" class="formGroupTitle"
                >结算账户信息</a-col
              >
            </a-row>
            <a-form-item
              class="formItemWidth"
              v-bind="formItemLayout"
              label="账户类型"
            >
              <span class="ant-form-text" v-if="bankCard.isPrivate == false"
                >对公</span
              >
              <span class="ant-form-text" v-if="bankCard.isPrivate == true"
                >对私</span
              >
            </a-form-item>
            <a-form-item
              class="formItemWidth"
              v-bind="formItemLayout"
              label="账户名称"
            >
              <span v-if="show" class="ant-form-text">{{
                bankCard.accountName
              }}</span>
              <span v-if="!show" class="ant-form-text"
                ><span v-if="bankCard.isPrivate">
                  <a-hide-data
                    :params="{ type: 'idName', value: bankCard.accountName }"
                  ></a-hide-data></span
                ><span v-if="!bankCard.isPrivate">{{
                  bankCard.accountName | accountfilter
                }}</span></span
              >
            </a-form-item>
            <a-form-item class="formItemWidth"></a-form-item>
            <a-form-item
              class="formItemWidth"
              v-bind="formItemLayout"
              label="开户行名称"
            >
              <span class="ant-form-text">{{ bankCard.bankName }}</span>
            </a-form-item>
            <a-form-item
              class="formItemWidth"
              v-bind="formItemLayout"
              label="开户行所在地"
            >
              <span class="ant-form-text"
                >{{ bankCard.province }}-{{ bankCard.city }}</span
              >
            </a-form-item>
            <a-form-item
              class="formItemWidth"
              v-bind="formItemLayout"
              label="支行名称"
            >
              <span class="ant-form-text">{{ bankCard.bankBranchName }}</span>
            </a-form-item>
            <a-form-item
              class="formItemWidth"
              v-bind="formItemLayout"
              label="账号"
            >
              <span v-if="show" class="ant-form-text">{{
                bankCard.cardNo
              }}</span>
              <span v-if="!show" class="ant-form-text">
                <a-hide-data
                  :params="{ type: 'bankCard', value: bankCard.cardNo }"
                ></a-hide-data>
              </span>
            </a-form-item>
            <a-form-item
              class="formItemWidth"
              v-bind="formItemLayout"
              label="预留银行手机号"
            >
              <span v-if="show" class="ant-form-text">{{
                bankCard.mobileNo
              }}</span>
              <span v-if="!show" class="ant-form-text">{{
                bankCard.mobileNo | phoneFilter
              }}</span>
            </a-form-item>
            <!-- <a-form-item class="formItemWidth" v-bind="formItemLayout" label="持卡人身份证">
              <span class="ant-form-text">{{bankCard.idCard}}</span>
            </a-form-item>-->

            <a-row>
              <a-col :xs="{ span: 24 }" :sm="{ span: 4 }" class="formGroupTitle"
                >业务配置</a-col
              >
            </a-row>
            <a-row>
              <a
                @click="aClick(agent.memberNo)"
                href="javascript:false;void(0);"
                >查看费率信息</a
              >
            </a-row>
            <a-form-item
              class="formItemWidth"
              v-bind="formItemLayout"
              label="分润比例"
            >
              <span class="ant-form-text">{{ agent.profitPercent }}%</span>
            </a-form-item>
            <a-form-item
              class="formItemWidth"
              v-bind="formItemLayout"
              label="分润结算方式"
            >
              <span
                class="ant-form-text"
                v-if="agent.profitSettleType == 'self'"
                >结算本级</span
              >
              <span
                class="ant-form-text"
                v-if="agent.profitSettleType == 'higher'"
                >结算上级</span
              >
            </a-form-item>
            <a-row>
              <a-button
                v-if="show"
                type="primary"
                :loading="loading"
                @click="download"
                >下载附件</a-button
              >
            </a-row>
          </a-form>
          <div v-if="show" style="text-align: center">
            <!-- 服务商WEB-合作机构管理-合作机构信息查询-详细，点击底部变更按钮时，提示：无此权限 -->
            <!-- <a-button
              type="primary"
              style="width: 8vw"
              @click="goModification"
              size="large"
              >业务变更</a-button
            > -->
            <ControlButton 
            buttonText='业务变更'  
            buttonType='primary'
            style="width: 8vw" 
            toolParams='MODIFY_SERVICE_PROVIDER' 
            class="button_sty" 
             @click="goModification()"/>

          </div>
        </div>
      </a-spin>
      <a-modal
        @ok="handleOk"
        @cancel="handleCancel"
        :visible="modalVisible"
        :footer="null"
      >
        <div>
          <agent-rate-view
            :MerRateList="MerRateList"
            ref="getMerRateData"
          ></agent-rate-view>
          <AddedFunctionLists :memberNo="memberNo" v-if="memberNo" />
        </div>
      </a-modal>
    </div>

    <!-- //业务变更 -->
    <div v-if="!ifFee">
      <a-form
        @submit="handleSubmit"
        style="width: 100%; margin: 0px auto"
        :form="form"
      >
        <!-- 是 -->

        <div>
          <agent-rate
            :MerRateList="MerRateList"
            ref="getMerRateData"
          ></agent-rate>
        </div>

        <a-form-item v-bind="formItemLayout" label="分润比例">
          <div style="display: flex">
            <div>
              <a-input
                v-decorator="[
                  'profitPercent',
                  {
                    rules: [{ required: true, message: '请输入分润比例' }],
                    initialValue: '100',
                  },
                ]"
                placeholder="请输入分润比例"
              />
            </div>
            <div>%</div>
          </div>
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="分润结算方式">
          <a-radio-group
            v-decorator="[
              'profitSettleType',
              {
                rules: [
                  {
                    required: true,
                    message: '请选择分润结算方式',
                  },
                ],
                initialValue: 'self',
              },
            ]"
          >
            <a-radio value="self">结算本级</a-radio>
            <a-radio value="higher">结算上级</a-radio>
          </a-radio-group>
        </a-form-item>

        <!-- add 增值功能 超级管理员 -->
        <a-form-item style="width: 80%; margin: 0px auto">
          <AddedFunctionConfig
            :FunctionLists="FunctionLists"
            v-if="FunctionLists.length"
            ref="childTool"
            @getChildFun="getChildFun"
          />
        </a-form-item>
        <a-row>
          <a-col :xs="{ span: 24 }" :sm="{ span: 12, offset: 7 }">
            <div style="margin-top: 30px">
              <a-button
                class="submitButton"
                :loading="addLoading"
                type="primary"
                html-type="submit"
                >保存</a-button
              >
              <a-button
                class="submitButton"
                type="primary"
                @click="goinfoquery"
                style="margin-left: 10px"
                >取消</a-button
              >
            </div>
          </a-col>
        </a-row>
      </a-form>
    </div>
  </div>
</template>

<script>

import ControlButton from "@/components/ControlButton"
import { message } from "ant-design-vue";
import api from "@/common/api";
import { error } from "util";
import { fail } from "assert";
import AHideData from "../../common/HideData";
import AgentRate from "../../common/AgentRate";
import AgentRateView from "../../common/AgentRateView";
import AddedFunctionLists from "@/components/AddedFunction/AddedFunctionLists";
import AddedFunctionConfig from "@/components/AddedFunction/AddedFunctionConfig";

export default {
  components: {
    ControlButton,
    AHideData,
    AgentRate,
    AgentRateView,
    AddedFunctionLists,
    AddedFunctionConfig,
  },
  data() {
    return {
      FunctionLists: [], //  增值功能

      addedValues: [], // 增值功能提交参数
      feeTemplateUpdateRequests: [],
      profitPercent: "", // 分润比例

      memberNo: "",
      MerRateList: null,
      iconLoading: false,
      loading: false,
      addLoading: false,
      modalVisible: false,
      spinning: false,
      show: false,
      queryDetail: {},
      smallIdentity: {},
      agent: {},
      bankCard: {},
      member: {},
      attachRequest: {},
      legalIdentity: {},
      ratelist: [],
      ifFee: true,
      form: this.$form.createForm(this),
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 15, offset: 1 },
          md: { span: 15, offset: 1 },
        },
      },
      sensitive:localStorage.getItem("sensitive")
    };
  },
  watch: {},
  computed: {},

  mounted() {
    let memberNo = this.$route.params.id;
    this.getQueryDetail(memberNo);
  },
  methods: {
    goModify() {
      this.query.verCode = null;
      this.visible = true;
    },
    getQueryDetail(memberNo) {
      this.$axios.get("/agent/agent/getByMemberNo/" + memberNo).then(
        (res) => {
          if (res.data.code == "OK") {
            this.queryDetail = res.data.data;
            this.show = res.data.data.show;
            if (this.sensitive == '1') {
              this.show = false
            }
            this.agent = res.data.data.agent;
            this.bankCard = res.data.data.bankCard;

            // this.member = res.data.data.member;
            this.attachRequest = res.data.data.attachRequest;
            if (this.agent.merchantType == "small") {
              this.smallIdentity = res.data.data.smallIdentity;
            } else {
              this.legalIdentity = res.data.data.legalIdentity;
            }
          }
        },
        (err) => {}
      );
    },

    handleOk(e) {
      setTimeout(() => {
        this.modalVisible = false;
      }, 2000);
    },
    handleCancel(e) {
      this.modalVisible = false;
    },
    goModification() {
      this.ifFee = false;
      // add 增值功能
      this.getValuedAddFunctionTools(this.agent.memberNo);
      this.$axios.get("/agent/agent/fetch/fee/" + this.agent.memberNo).then(
        (res) => {
          if (res.data.code == "OK") {
            this.MerRateList = null;
            this.MerRateList = res.data.data.fee;
            this.form.setFieldsValue({
              profitPercent: res.data.data.profitPercent,
              profitSettleType: res.data.data.profitSettleType,
            });
          } else {
            this.$message.error(res.data.message);
          }
        },
        (err) => {}
      );
    },
    goinfoquery() {
      this.ifFee = true;
      //  this.$router.replace({ path: "/Partners/PartnersInfoQuery"  });
    },
    aClick(memberNo) {
      this.modalVisible = true;
      this.memberNo = memberNo;
      this.$axios.get("/agent/logAgent/fetch/fee/" + memberNo).then((res) => {
        if (res.data.code == "OK") {
          this.MerRateList = res.data.data.fee;
        }
      });
    },
    download() {
      this.loading = true;
      this.$axios.post("/file/file/attach", this.attachRequest).then(
        (res) => {
          //   console.log('res',res)
          //   console.log("res.data.data:",res.data.data);
          this.loading = false;
          if (res.data.data != null) {
            window.location.href = res.data.data;
          } else {
            this.$message.error("附件不存在");
          }
        },
        (err) => {
          this.loading = false;
          this.$message.error(err.message);
        }
      );
    },
    getValuedAddFunctionTools(value) {
      var data = {
        memberNo: value,
      };
      this.$axios.post("/agent/added/value/defaultConfig", data).then((res) => {
        if (res.data.code == "OK") {
          this.FunctionLists = res.data.list || [];
        } else {
          this.FunctionLists = [];
          this.$message.error(res.data.message);
        }
      });
    },

    getChildFun(payload) {
      this.addedValues = payload.list;
      this.getAgentUpdateInfo();
    },

    getAgentUpdateInfo() {
      this.addLoading = true;
      this.$axios
        .post("/agent/agent/update/fee", {
          memberNo: this.agent.memberNo,
          profitPercent: this.profitPercent,
          profitSettleType: this.profitSettleType,
          fee: this.feeTemplateUpdateRequests,
          addedValues: this.addedValues, // add 新增addedValues
        })
        .then(
          (res) => {
            this.addLoading = false;

            if (res.data.code == "OK") {
              this.$router.replace({ path: "/Partners/PartnersInfoQuery" });
            } else {
              this.$message.warning(res.data.message);
            }
          },
          (err) => {
            this.addLoading = false;
          }
        );
    },

    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          this.$refs.getMerRateData.rateConversion();

          if (this.$refs.getMerRateData.feeTemplateList.length == 0) {
            console.log("数组为0");
            return false;
          }
          // console.log("通过",this.$refs.getMerRateData.feeTemplateList)
          let feeTemplateUpdateRequests =
            this.$refs.getMerRateData.feeTemplateList;

          this.feeTemplateUpdateRequests = feeTemplateUpdateRequests;
          this.profitSettleType = values.profitSettleType;
          this.profitPercent = values.profitPercent;
          // 判断增值功能
          if (this.FunctionLists.length) {
            this.$refs.childTool.PopAddFunction();
          } else {
            this.getAgentUpdateInfo();
          }
        }
      });
    },
  },
  filters: {
    creditNoFilter(value) {
      if (value) {
        var len = value.length;
        var firstStr = value.substr(0, 1);
        var lastStr = value.substr(-1);
        var middleStr = value
          .substring(1, len - Math.abs(-1))
          .replace(/[\s\S]/gi, "*");
        var tempStr = firstStr + middleStr + lastStr;
        return tempStr;
      }
    },
    nameFilter(value) {
      if (value) {
        var reg = /^./;
        return value.replace(reg, "*");
      }
    },
    phoneFilter(value) {
      if (value) {
        var reg = /^(\d{3})\d{4}(\d{4})$/;
        return value.replace(reg, "$1****$2");
      }
    },
    accountfilter(value) {
      if (value) {
        let len = value.length - 2;
        let arr = [];
        for (let i = 0; i < len; i++) {
          let item = "*";
          arr.push(item);
        }
        let arrstring = arr.join("");
        return (
          value.substring(0, 1) +
          arrstring +
          value.substring(value.length - 1)
        );
      }
    },
    otherfilter(value) {
      if (value.realProvinceName) {
        let data =
          value.realProvinceName +
          "-" +
          value.realCityName +
          "-" +
          value.realDistrictName +
          "-" +
          value.realAddress;
        let len = data.length - 2;
        let arr = [];
        for (let i = 0; i < len; i++) {
          let item = "*";
          arr.push(item);
        }
        let arrstring = arr.join("");
        return (
          data.substring(0, 1) + arrstring + data.substring(data.length - 1)
        );
      }
    },
  },
};
</script>

<style lang="less" scoped>
.card_sty {
  margin-bottom: 30px;
}
/deep/.noExpand {
  .ant-table-row-expand-icon {
    display: none;
  }
}
.mainContent {
  overflow-y: scroll;
  height: 100%;
  padding: 30px;
}

/* 滚动条样式 */
.mainContent::-webkit-scrollbar {
  width: 4px;
  height: 4px;
  scrollbar-arrow-color: red;
}

.mainContent::-webkit-scrollbar-thumb {
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgba(0, 0, 0, 0.2);
  scrollbar-arrow-color: red;
}

.mainContent::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1);
}

span {
  cursor: pointer;
}

.formItemWidth {
  width: 30%;
}

.formGroupTitle {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 12px;
  margin-top: 15px;
  text-align: left;
  /* margin-left: 20px; */
}

.ant-card-head-title {
  padding: 12px 0 !important;
}

.ant-card-grid {
  padding: 12px;
}

.ant-card-head {
  background: transparent;
  border-bottom: 1px solid #e8e8e8;
  padding: 0 24px;
  border-radius: 2px 2px 0 0;
  zoom: 1;
  margin-bottom: -1px;
  min-height: 45px !important;
  font-size: 16px;
  color: #52506b;
  font-weight: 400;
  display: flex;
}

.ant-card .ant-card-grid:nth-child(4n + 1),
.ant-card .ant-card-grid:nth-child(4n + 2) {
  background: #f7f9fc;
}

.ant-card-grid:hover {
  /* box-shadow: none; */
  box-shadow: 1px 0 0 0 #e8e8e8, 0 1px 0 0 #e8e8e8, 1px 1px 0 0 #e8e8e8,
    1px 0 0 0 #e8e8e8 inset, 0 1px 0 0 #e8e8e8 inset;
}

.modalClass {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding-top: 40px;
  padding-bottom: 20px;
}

.modalClass h4 {
  color: #29a576;
  font-size: 22px;
  font-weight: 400;
  margin-top: 15px;
  margin-bottom: 25px;
}

.modalClass p {
  margin-bottom: 10px;
}
.submitButton {
  width: 8vw;
}
</style>
